<template>
  <el-dialog
    top="30px"
    width="70%"
    title="受理推荐"
    append-to-body
    :close-on-click-modal="false"
    :visible.sync="visible"
    :before-close="beforeClose"
  >
    <table class="table table-bordered vertical-align-middle" v-loading="loading">
      <colgroup>
        <col width="20%" />
        <col width="30%" />
        <col width="20%" />
        <col width="30%" />
      </colgroup>
      <tbody>
        <tr>
          <td>企业名称</td>
          <td>{{ related.customer_name }}</td>
          <td>经营地址</td>
          <td>{{ related.address }}</td>
        </tr>
        <tr>
          <td>组织类型</td>
          <td :colspan="isCompany ? '1' : '3'">{{ related.org_class_name }}</td>
          <template v-if="isCompany">
            <td>统一社会信用代码</td>
            <td>{{ related.register_no }}</td>
          </template>
        </tr>
        <tr>
          <td>负责人</td>
          <td>{{ related.corp_name }}</td>
          <td>负责人身份证</td>
          <td>{{ related.lender_idcard }}</td>
        </tr>
        <tr>
          <td>联系电话</td>
          <td>{{ related.mobile_no }}</td>
          <td>主营产业</td>
          <td>{{ related.main_business }}</td>
        </tr>
        <tr>
          <td>经营范围</td>
          <td colspan="3">{{ related.business_scope }}</td>
        </tr>
        <tr>
          <td>申请金额</td>
          <td>{{ related.apply_funds }}万元</td>
          <td>贷款年限</td>
          <td>{{ related.load_years }}</td>
        </tr>
        <tr>
          <td>资金用途</td>
          <td colspan="3">{{ related.funds_use_dir }}</td>
        </tr>
      </tbody>
    </table>

    <div class="my-5 text-center">
      <el-button
        type="primary"
        :loading="saveLoading || loading"
        class="btn-long"
        @click="submitForm"
      >
        推荐
      </el-button>
      <el-button :loading="saveLoading" class="btn-long" @click="beforeClose">取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {},
  props: {
    visible: Boolean,
    queryId: String,
  },
  data() {
    return {
      loading: false,
      related: {},

      saveLoading: false,
    }
  },
  computed: {
    isCompany() {
      return this.related.customer_type === '1'
    },
  },
  watch: {
    queryId: {
      handler: function () {
        if (this.visible && this.queryId) {
          this.getData()
        }
      },
      immediate: true,
    },
  },
  created() {},
  mounted() {},
  methods: {
    beforeClose() {
      this.$emit('update:visible', false)
    },
    getData() {
      this.loading = true
      this.$api
        .getData({
          table: 'customer_related',
          params: {
            'customer_related_id.eq': this.queryId,
          },
        })
        .then(res => {
          this.related = res?.data?.[0] ?? {}
        })
        .finally(() => {
          this.loading = false
        })
    },
    submitForm() {
      this.saveLoading = true
      this.$api
        .updateData({
          table: 'customer_related',
          id: this.queryId,
          data: {
            channel_claim_status: 1,
          },
        })
        .then(res => {
          this.$message.success('推荐成功！')
          this.beforeClose()
          this.$emit('success', res)
        })
        .catch(err => {
          let errStr = err?.data
          if (typeof errStr !== 'string') {
            errStr = '推荐失败，请重试！'
          }
          this.$message.error(errStr)
        })
        .finally(() => {
          this.saveLoading = false
        })
    },
  },
}
</script>

<style lang="scss" scoped>
.vertical-align-middle td {
  vertical-align: middle;
  &:nth-child(2n + 1) {
    color: $gray-700;
    background-color: $gray-100;
  }
}
</style>
